<template>
  <div>
    <div class="title">
      试卷ID:<el-input
        v-model="testIdval"
        class="input inputt"
        clearable
      ></el-input>
      年级:
      <el-select
        v-model="testClassval"
        placeholder="年级"
        class="input"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      学科：
      <el-select
        v-model="testSubjectNameval"
        placeholder="请选择"
        class="input"
        clearable
      >
        <el-option
          v-for="item in optionss"
          :key="item.valuee"
          :label="item.labell"
          :value="item.valuee"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="testquery()">查询</el-button>
    </div>
    <div class="list">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="testId" label="id" width="180">
        </el-table-column>
        <el-table-column prop="testSubjectName" label="学科" width="180">
        </el-table-column>
        <el-table-column prop="testName" label="名称" width="550">
        </el-table-column>
        <el-table-column prop="testCreateTime" label="创建时间">
        </el-table-column>
        <el-table-column prop="hander" label="操作" align="center">
          <template #default="scope">
            <el-button size="small" @click="linkcreat(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="delrow(scope.row)"
              >删除</el-button
            ></template
          ></el-table-column
        >
      </el-table>
    </div>
    <div class="page">
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  testrenderlink,
  testquerylink,
  testdellink,
} from "../../../apis/shimengtong/Index.js";
export default {
  data() {
    return {
      //分页器
      limit: 5,
      page: 1,
      total: 50,
      //testIdval:试卷ID输入框值
      testIdval: "",
      //testClassval:年级输入框值
      testClassval: "",
      options: [
        {
          value: "一年级",
          label: "一年级",
        },
        {
          value: "二年级",
          label: "二年级",
        },
        {
          value: "三年级",
          label: "三年级",
        },
        {
          value: "四年级",
          label: "四年级",
        },
        {
          value: "五年级",
          label: "五年级",
        },
        {
          value: "六年级",
          label: "六年级",
        },
        {
          value: "初一",
          label: "初一",
        },
        {
          value: "初二",
          label: "初二",
        },
        {
          value: "初三",
          label: "初三",
        },
        {
          value: "高一",
          label: "高一",
        },
        {
          value: "高二",
          label: "高二",
        },
        {
          value: "高三",
          label: "高三",
        },
      ],
      //testSubjectNameval:学科输入框值
      testSubjectNameval: "",
      optionss: [
        {
          valuee: "数学",
          labell: "数学",
        },
        {
          valuee: "语文",
          labell: "语文",
        },
        {
          valuee: "英语",
          labell: "英语",
        },
      ],
      //表格数据
      tableData: [
        {
          testId: "",
          testSubjectName: "",
          testName: "",
          testCreateTime: "",
        },
      ],
      //编辑跳转到创编页面携带的参数
      to: [],
      todata:1,
    };
  },
  mounted() {
    this.show();
  },
  methods: {
    //表格中，点击删除，删除一行
    delrow(row) {
      testdellink(row.testId).then(() => {
        console.log(row.testId);
        this.show();
        this.$message({
          message: "删除成功！",
          type: "success",
        });
      });
    },
    //点击之后跳转到创编页面
    linkcreat(row) {
      // console.log(row.testId);
      // this.to.push({ page: this.page, limit: this.limit, testid: row.testId });
      // this.todata=row.testId
      this.$router.push({
        name: "testcreate",
        query: { todata: row.testId },
      });
    },
    //封装表格渲染函数
    show() {
      testrenderlink(this.page, this.limit).then((ok) => {
        this.tableData = [...ok.data.data.records];
        this.total = ok.data.data.total;
      });
    },
    //试卷list 查询
    testquery() {
      testquerylink(
        this.page,
        this.limit,
        this.testIdval,
        this.testClassval,
        this.testSubjectNameval
      ).then((ok) => {
        this.tableData = [...ok.data.data.records];
        this.total = ok.data.data.total;
        this.page = ok.data.data.pages;
        this.limit = ok.data.data.size;
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.testquery();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.testquery();
    },
  },
};
</script>

<style scoped>
.input {
  width: 200px;
  margin-right: 20px;
}
.list {
  margin-top: 20px;
}
.inputt {
  margin-left: 5px;
}
.block {
  margin-top: 20px;
}
</style>